import React, { useState, useEffect } from "react";
import ReactEcharts from "echarts-for-react";
import { getPieOption } from "@/config/echarts.config";
// import styles from "./MonCharts.module.less";

const PieCharts = ({
  data = [{ name: "Fitst", value: 1 }],
  text = "",
  subtext = "",
  small,
}) => {
  let size = small ? ["48px", "80px"] : ["78px", "130px"];
  const [option, setOption] = useState({});

  useEffect(() => {
    setOption(
      getPieOption(text, subtext, data, size, [
        "#5b8ff9",
        "#eb5962",

        "#7585a2",
        "#f7c739",
        "#73deb3",
        "#f58c61",

        "#fc8bb4",
        "#59aded",
        "#7f73df",

        "#45b1a9",
      ])
    );
  }, [data, subtext]);

  return <ReactEcharts style={{ height: "100%" }} option={option} />;
};

export default PieCharts;
